<template>
	<view class="content plan">
		<topBar title='账单' />
		<view class="title">
			此处记录您所有的余额记录
		</view>
		<view class="items" v-for="record in recordList">
			<view v-if="record.type=='充值'">
				<view class="tit">
					<view><span style="font-size: 60upx;color: #1467FF;margin-right: 20upx;" >+</span><text class="pri">{{record.content.substring(record.content.indexOf("了")+1,record.content.indexOf("元"))}}</text> 元</view>
					<view>{{record.transTime}}</view>
				</view>
				
				<view class="tit">
					<view class="des">{{record.type}}</view>
					<view class="icon cl-blue"><a @click="goLoanDet(record.id)">
							<font size="2px">查看详情</font>
						</a></view>
				</view>
			</view>
			<view v-if="record.type=='提现'">
				<view class="tit">
					<view><span style="font-size: 60upx;color: red;margin-right: 20upx;" >-</span><text class="pri">{{record.content.substring(record.content.indexOf("了")+1,record.content.indexOf("元"))}}</text> 元</view>
					<view>{{record.transTime}}</view>
				</view>
				
				<view class="tit">
					<view class="des">{{record.type}}</view>
					<view class="icon cl-blue"><a @click="goLoanDet(record.id)">
							<font size="2px">查看详情</font>
						</a></view>
				</view>
			</view>
			<view v-if="record.type=='还款'">
				<view class="tit">
					<view><span style="font-size: 60upx;color: #4CD964;margin-right: 20upx;" >+</span><text class="pri">{{record.content.substring(record.content.indexOf("笔")+1,record.content.indexOf("的"))}}</text> 元</view>
					<view>{{record.transTime}}</view>
				</view>
				
				<view class="tit">
					<view class="des">{{record.content}}</view>
					<view class="icon cl-blue"><a @click="goLoanDet(record.id)">
							<font size="2px">查看详情</font>
						</a></view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import topBar from '../../components/TopBar.vue'

	export default {
		components: {
			topBar
		},
		data() {
			return {
				recordList: []
			}
		},
		onLoad() {
			this.getTransCode()
		},
		methods: {
			goPath: function(url) {
				uni.navigateTo({
					url
				});
			},

			getTransCode() {
				this.request({
					url: `user/getTransCode`,
					method: 'GET'
				}).then(res => {
					// alert(JSON.stringify(res.data.result))
					this.recordList = res.data.result;

				})
			},

			goLoanDet(id) {
				uni.navigateTo({
					url: `/pages/borrow/loanDet?id=`+id
				})
			}

		}
	}
</script>
<style>
	@import "/colorui/main.css";
	@import "/colorui/icon.css";
</style>
<style scoped lang="scss">
	.plan {
		.title {
			color: $uni-text-color-grey;
			line-height: 100upx;
			font-size: 28upx;
			padding: 0 30upx;
		}

		.items {
			box-shadow: 0 0 4upx 0 $uni-border-color;
			padding: 30upx;
			font-size: 28upx;

			.tit {
				color: $uni-text-color-greyb;
				display: flex;
				justify-content: space-between;

				.pri {
					font-size: 40upx;
				}
			}

			.des {
				color: $uni-text-color-grey;
				line-height: 60upx;
			}
		}
	}
</style>
